const api = require('../../../../wxapi/config.js')
const F2 = require('../../../../component/ui/f2-canvas/lib/f2')
Page({
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {
		return {
			title: '影视行业大数据',
			path: '/pages/index/RankingList/plan/plan'
		}
	},
	data: {
		types: 0,
		tag: 0,
		active: 0,
		chartData: [],
		tableData: [],
		opts: {
			lazyLoad: true
		},
		requestData: null,
		yearList: [],
		currYear: (new Date()).getFullYear(),
		tabletitle: '题材',
		previous: false,
		next: true,
		ischartloading: false,
		istableloading: false,
		skeleton: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
	},
	// 切换电视剧/电影
	onChangeNav (event) {
		this.setData({
			types: event.detail.index,
			tag: 0,
			active: 0
		})
		this.getChartData(this.data.types)
		this.getTableData(this.data.types, this.data.currYear, 0)
	},
	// 题材、地区、机构切换
	onChangeBomtNav(event) {
		this.setData({
			tag: event.detail.index
		})
		if (event.detail.index == 0) {
			this.setData({
				tabletitle: '题材'
			})
		}
		if (event.detail.index == 1) {
			this.setData({
				tabletitle: '地区'
			})
		}
		if (event.detail.index == 2) {
			this.setData({
				tabletitle: '机构'
			})
		}
		this.getTableData(this.data.types, this.data.currYear, this.data.tag)
	},
	// 图表初始化
	initChart (data) {
		this.chartComponent = this.selectComponent('#bar-dom')
		this.chartComponent.init((canvas, width, height) => {
			const chart = new F2.Chart({
				el: canvas,
				width,
				height
			})
			var Global = F2.Global
			chart.source(data, {
				'备案总部数': {
					tickCount: 5
				}
			});
			chart.coord({
				transposed: true
			});
			chart.axis('年份', {
				line: Global._defaultAxis.line,
				grid: null
			});
			chart.axis('备案总部数', {
				line: null,
				grid: Global._defaultAxis.grid,
				label: function label(text, index, total) {
					var textCfg = {};
					if (index === 0) {
						textCfg.textAlign = 'left'
					} else if (index === total - 1) {
						textCfg.textAlign = 'right'
					}
					return textCfg;
				}
			});
			chart.interval().position('年份*备案总部数').color('#2073c1')
			chart.render()
			return chart		
		})
	},
	// 获取图表数据
	getChartData(types) {
		const datas = []
		this.setData({
			ischartloading: true
		})
		api.getPlanYearCountTotal({
			types: types
		}).then((res) => {	
			if (res.data.length !== 0) {
				this.data.chartData = []
				for (let i in res.data) {
					datas.push({
						'年份': res.data[i].name,
						'备案总部数': parseInt(res.data[i].total)
					})
					this.data.yearList.push(parseInt(res.data[i].name))
				}
				datas.reverse()
				this.setData({
					yearList: this.data.yearList,
					currYear: this.data.yearList[0],
					chartData: datas,
					ischartloading: false
				})
				this.initChart(datas)
			} else {
				this.setData({
					yearList: [],
					currYear: this.data.currYear,
					chartData: [],
					ischartloading: false
				})
			}
			
		})
	},
	// 获取表格数据
	getTableData(types, spans, tag) {
		this.setData({
			istableloading: true
		})
		api.getPlanSummaryTable({
			types: types,
			spans: spans,
			tag: tag
		}).then((res) => {
			if (res.data.length !== 0) {
				this.setData({
					tableData: res.data,
					istableloading: false
				})
			} else {
				this.setData({
					tableData: [],
					istableloading: false
				})
			}
			
		})
	},
	// 前一年
	changeprev () {
		var val = this.data.currYear
    if (!this.data.previous) {
      if (val === this.data.yearList[this.data.yearList.length - 1]) {
        this.setData({
          currYear: val,
          previous: true
        })
      } else {
        val--
        if (val === this.data.yearList[this.data.yearList.length - 1]) {
          this.setData({
            currYear: val,
            previous: true
          })
        } else {
          this.setData({
            currYear: val,
            previous: false,
            next: false
          })
        }
      }
      this.getTableData(this.data.types, this.data.currYear, this.data.tag)
    }
	},
	// 后一年
	changenext () {
		var val = this.data.currYear
    if (!this.data.next) {
      if (val === this.data.yearList[0]) {
        this.setData({
          currYear: val,
          next: true
        })
      } else {
        val++
        if (val === this.data.yearList[0]) {
          this.setData({
            currYear: val,
            next: true
          })
        } else {
          this.setData({
            currYear: val,
            previous: false,
            next: false
          })
        }
      }
      this.getTableData(this.data.types, this.data.currYear, this.data.tag)
    }
	},
	onLoad: function (options) {
		this.getChartData(this.data.types)
		setTimeout(() => {
			this.getTableData(this.data.types, this.data.currYear, this.data.tag)
		}, 200)
	}
})